<template>
  <div class="flex h-full">
    <a-card
      class="pt-2 mr-2 min-w-fit h-full"
      :class="[drawerOpen ? 'w-[320px]' : 'w-[90px]']"
      size="small"
      :body-style="{ height: '100%', padding: '0 8px', display: 'flex', flexDirection: 'column' }"
    >
      <a-drawer
        :open="true"
        placement="left"
        :closable="false"
        :width="drawerWidth"
        class="shadow-none"
        :mask="false"
        :body-style="{ padding: 0 }"
        :get-container="false"
      >
        <div v-show="drawerOpen" class="w-full h-full py-2 px-2 flex flex-col">
          <div class="flex justify-between items-center mb-2 -mr-2">
            <SearchComb placeholder="姓名/助记码/卡号/手机号/身份证号" @search="queryList" />
            <a-button class="p-0 pl-2 ml-2 h-8 w-10 text-left rounded-l-full border-none bg-secondary" @click="closeDrawer">
              <BaseIcon name="DoubleLeftOutlined" class="text-primary" />
            </a-button>
          </div>
          <BaseList :data-source="listDataSource" :loading="loading" class="flex-1 overflow-auto w-full">
            <template #renderItem="{ item }">
              <div class="py-2 px-3" :class="currentPatient.lsh === item.lsh ? 'active' : ''" @click="onSelectPatient(item)">
                <div class="flex justify-between mb-2">
                  <div class="flex">
                    <LabelValue class="text-primary text-base font-bold" :width="80" :value="item.brName" />
                    <span>{{ item.brXb }}</span>
                    <span class="ml-2">{{ item.brAge }}</span>
                  </div>
                  <div>{{ item.sfsc }}</div>
                </div>
                <div class="flex justify-between">
                  <div>{{ item.oprEyeType }}</div>
                  <div>{{ item.ssys }}</div>
                  <div>{{ item.oprDate }} {{ item.oprTime }}</div>
                </div>
              </div>
            </template>
          </BaseList>
        </div>
        <div v-show="!drawerOpen" class="flex flex-col h-full">
          <div class="border-b h-[66px] flex items-center">
            <a-button class="p-0 pr-2 h-8 w-10 text-right rounded-r-full border-none bg-secondary" @click="openDrawer">
              <BaseIcon name="DoubleRightOutlined" class="text-primary" />
            </a-button>
          </div>
          <BaseList
            v-if="listDataSource && listDataSource.length > 0"
            :data-source="listDataSource"
            :loading="loading"
            class="flex-1 px-2 overflow-auto w-full"
          >
            <template #renderItem="{ item }">
              <div class="py-1 px-1" :class="currentPatient.lsh === item.lsh ? 'active' : ''" @click="onSelectPatient(item)">
                <div class="flex items-center">
                  <LabelValue class="text-primary text-base font-bold" :width="86" value-class="text-center" :value="item.brName" />
                </div>
                <div class="flex justify-between">
                  <LabelValue :width="86" value-class="text-center" :value="item.oprEyeType" />
                </div>
              </div>
            </template>
          </BaseList>
          <div v-else class="text-center mt-2 text-slate-400">暂无数据</div>
        </div>
      </a-drawer>
    </a-card>

    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader :patient-info="currentPatient" @change="queryList">
        <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
        <div>
          <div class="flex items-center">
            <LabelValue class="ml-4" :label="isBJMSG ? '病历号' : '手术病案号'" :width="200" :value="currentPatient?.sfsc" />
            <LabelValue class="ml-4" label="手术医生" :width="210" :value="currentPatient?.ssys" tooltip />
            <LabelValue
              class="ml-4"
              label="手术时间"
              :width="210"
              :value="currentPatient?.oprDate && currentPatient?.oprDate + ' ' + currentPatient?.oprTime"
              tooltip
            />
            <LabelValue class="ml-4" label="麻醉方式" :width="140" :value="currentPatient?.anesthesiaMethodName" tooltip />
          </div>
          <div class="flex items-center">
            <LabelValue class="ml-4" label="眼别" :width="200" :value="currentPatient?.oprEyeType" tooltip />
            <LabelValue class="ml-4" label="右眼手术" :width="210" :value="currentPatient?.odmc" tooltip />
            <LabelValue class="ml-4" label="左眼手术" :width="210" :value="currentPatient?.osmc" tooltip />
            <LabelValue class="ml-4" label="咨询师" :width="140" :value="currentPatient?.zxysName" tooltip />
          </div>
        </div>
      </PatientInfoHeader>
      <a-card class="mt-2 w-full flex-1 overflow-hidden" :class="{ 'disabled-style': !currentPatient?.lsh }" :body-style="{ height: '100%' }">
        <!-- <TabEleCase :current-patient="currentPatient" /> -->
        <TabEMR :current-patient="currentPatient" categroy-type="4" />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import TabEMR from '@/views/in-doctor/workstation/components/TabEMR'
import SearchComb from '@/components/SearchComb'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import { post } from '@/utils/request'
import BaseList from '@/components/BaseList'
// import TabEleCase from './TabEleCase'

// import { getSystemConfig } from '@/utils/systemConfig'
const loading = ref(false)

const listDataSource = ref([])

const currentPatient = ref({})

const drawerOpen = ref(true)
const drawerWidth = ref(320)
const params = ref({})
//左侧数据
const queryList = async (param = {}) => {
  if (param?.endDate) params.value = param
  loading.value = true
  const { code, data, msg } = await post('/operation/opex/getOperationRecordList', {
    zjm: params.value?.searchKey,
    eddate: params.value?.endDate,
    stdate: params.value?.startDate
  })
  loading.value = false
  if (code !== 0) return message.error(msg)
  listDataSource.value = data
  if (data && data.length > 0) {
    currentPatient.value = { ...data[0] }
    onSelectPatient(currentPatient.value)
  } else {
    onReset()
  }
}

const onSelectPatient = (row) => {
  currentPatient.value = { ...row }
}
const openDrawer = () => {
  drawerOpen.value = true
  drawerWidth.value = 320
}
const closeDrawer = () => {
  drawerOpen.value = false
  drawerWidth.value = 90
}
// 清空
const onReset = () => {
  currentPatient.value = {}
}

const isBJMSG = getSystemConfig('GHDJYS') === '4' //是否北京茗视光
// 标签
</script>

<style lang="less" scoped>
:deep(.ant-drawer-left > .ant-drawer-content-wrapper) {
  box-shadow: none !important;
}
</style>
